<template>
	<view>
		<z-paging :fixed="true" ref="paging" v-model="dataList" @query="queryList">
			<view class="d-c-c" slot="top">
				<view class="table-th table-item-1">日期</view>
				<view class="table-th table-item-1">单词数</view>
				<view class="table-th table-item-2">正确率</view>
				<view class="table-th table-item-2">查看详情</view>
			</view>
			<view class="d-c-c " :class="'choose' + index" v-for="(item, index) in dataList" :key="index">
				<view class="table-td table-item-1">{{item.review_date}}</view>
				<view class="table-td table-item-1">{{item.ready_word_num}}</view>
				<view class="table-td table-item-2">{{item.ratio}}%</view>
				<view class="table-td table-item-2" @click="report(item.record_id)">
					<u-icon name="calendar" color="#288AF9" size="28"></u-icon>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
			}
		},
		onLoad(option) {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 2000)
				return false
			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.$u.post(this.$u.api.reviewRecordList, {
					pageNo: pageNo,
					pageSize: pageSize,
				}).then((res) => {
					if (res.code == 1) {
						this.$refs.paging.complete(res.data.data)
					} else {
						this.$refs.paging.complete(false)
					}
				}).catch((res) => {
					this.$refs.paging.complete(false)
				})
			},
			// 查看复习报告
			report(id) {
				uni.navigateTo({
					url: '/pages/study/review21/report?recordId=' + id
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.table-th {
		height: 100rpx;
		border-bottom: 1rpx solid #EEEEEE;
		font-size: 28rpx;
		color: #333333;
		font-weight: 600;
		text-align: center;
		line-height: 100rpx;
	}
	.table-td {
		height: 80rpx;
		border-bottom: 1rpx solid #EEEEEE;
		font-size: 28rpx;
		color: #666666;
		font-weight: 400;
		text-align: center;
		line-height: 80rpx;
	}
	.table-item-1 {
		width: 28%;
	}
	.table-item-2 {
		width: 22%;
	}
</style>
